<template>
  <view class="page-container">
    <!-- 顶部留白区域 -->
    <view class="top-space"></view>
    
    <!-- 圆形图片按钮 -->
    <view class="image-btn-wrapper">
      <view class="image-container" @click="handleChooseImage">
        <view class="circle-btn" v-if="!selectedImage">
          <text class="btn-text">+</text>
        </view>
        <image 
          v-else 
          :src="selectedImage" 
          class="selected-image"
          mode="aspectFill"
          @click="handlePreviewImage"
        ></image>
      </view>
    </view>

    <!-- 天气预报区域（移至下载区域上方） -->
    <view class="weather-section">
      <view class="weather-title">今天天气预报</view>
      <view class="weather-card" v-if="weatherData">
        <view class="weather-date">{{ weatherData.today.date }} {{ weatherData.today.week }}</view>
        <view class="weather-temp">最高温{{ weatherData.today.high }}° / 最低温{{ weatherData.today.low }}°</view>
        <view class="weather-type">{{ weatherData.today.type }}</view>
      </view>
      <view class="loading" v-else>加载中...</view>

      <view class="weather-title" style="margin-top: 30rpx;">明天天气预报</view>
      <view class="weather-card" v-if="weatherData">
        <view class="weather-date">{{ weatherData.tomorrow.date }} {{ weatherData.tomorrow.week }}</view>
        <view class="weather-temp">最高温{{ weatherData.tomorrow.high }}° / 最低温{{ weatherData.tomorrow.low }}°</view>
        <view class="weather-type">{{ weatherData.tomorrow.type }}</view>
      </view>
      <view class="loading" v-else>加载中...</view>
    </view>

    <!-- 网络图片下载区域（移至天气预报下方） -->
    <view class="download-section">
      <view class="download-title">网络图片下载</view>
      <button class="download-btn" @click="downloadNetworkImage">下载图片</button>
      <view class="progress-text" v-if="downloadProgress > 0 && downloadProgress < 100">
        下载进度：{{ downloadProgress }}%
      </view>
      <image 
        v-if="downloadedImage" 
        :src="downloadedImage" 
        class="downloaded-image"
        mode="aspectFit"
      ></image>
      <view class="hint" v-else>点击“下载图片”按钮开始下载</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedImage: '', // 本地选择的图片临时路径
      weatherData: null, // 天气预报数据
      downloadedImage: '', // 下载的网络图片临时路径
      downloadProgress: 0 // 下载进度（0-100）
    };
  },
  onLoad() {
    this.getWeatherInfo(); // 页面加载时请求天气预报
  },
  methods: {
    // 选择本地图片
    handleChooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.selectedImage = res.tempFilePaths[0];
        }
      });
    },
    // 预览本地图片
    handlePreviewImage() {
      if (this.selectedImage) {
        uni.previewImage({
          current: this.selectedImage,
          urls: [this.selectedImage]
        });
      }
    },
    // 获取天气预报
    getWeatherInfo() {
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            const forecast = res.data.data.forecast;
            this.weatherData = {
              today: {
                date: forecast[0].date,
                week: forecast[0].week,
                high: forecast[0].high.replace('℃', ''),
                low: forecast[0].low.replace('℃', ''),
                type: forecast[0].type
              },
              tomorrow: {
                date: forecast[1].date,
                week: forecast[1].week,
                high: forecast[1].high.replace('℃', ''),
                low: forecast[1].low.replace('℃', ''),
                type: forecast[1].type
              }
            };
          }
        },
        fail: (err) => {
          console.error('获取天气失败：', err);
          uni.showToast({
            title: '天气加载失败',
            icon: 'none'
          });
        }
      });
    },
    // 下载网络图片并显示进度
    downloadNetworkImage() {
      const imageUrl = 'http://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
      uni.downloadFile({
        url: imageUrl,
        // 监听下载进度
        onProgressUpdate: (res) => {
          this.downloadProgress = res.progress;
          console.log('下载进度：', res.progress, '%');
        },
        success: (res) => {
          if (res.statusCode === 200) {
            this.downloadedImage = res.tempFilePath;
            uni.showToast({
              title: '下载成功',
              icon: 'success'
            });
          }
        },
        fail: (err) => {
          console.error('图片下载失败：', err);
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 0 120rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.top-space {
  height: 60rpx;
}

.image-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.image-container {
  width: 200rpx;
  height: 200rpx;
}

.circle-btn {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  border: 2rpx dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.08);
}

.btn-text {
  color: #999;
  font-size: 70rpx;
  line-height: 1;
}

.selected-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1rpx solid #eee;
}

/* 天气预报样式 */
.weather-section {
  width: 100%;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
}

.weather-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.weather-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  padding-bottom: 30rpx;
}

.weather-card:last-child {
  border-bottom: none;
}

.weather-date {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.weather-temp {
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 10rpx;
}

.weather-type {
  font-size: 28rpx;
  color: #007aff;
  padding: 5rpx 15rpx;
  background-color: #e8f4ff;
  border-radius: 20rpx;
}

.loading {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
}

/* 网络图片下载区域样式 */
.download-section {
  width: 100%;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
}

.download-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.download-btn {
  margin-bottom: 20rpx;
}

.progress-text {
  color: #007aff;
  margin-bottom: 20rpx;
}

.downloaded-image {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
}

.hint {
  color: #999;
  text-align: center;
  padding: 20rpx 0;
}
</style>